<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>zcom</title>
	<link rel="stylesheet" href="css/zcom.css">
	<script src="js/zepto.js"></script>
	<script src="js/zcom.js"></script>
	<style>
		*{box-sizing: border-box;}
		.box{margin:2em 0;}
		.mo_modal .big{width:60%;height:30%;position:absolute;margin-left:-30%;margin-top:-15%;left:50%;top:50%;background:#fff;}

	</style>
</head>
<body>
	<div class="mo_title">
		标题1
	</div>

<div class="box">分割线</div>

<div class="mo_title">
	标题2
	<button class="mo_btn mo_left mo_m_center">按钮</button>
	<button class="mo_btn mo_right mo_p_center">按钮</button>
</div>

<div class="box">分割线</div>

<span class="mo_btn">按钮</span>
<span class="mo_btn green">按钮</span>
<span class="mo_btn red">按钮</span>
<span class="mo_btn yellow">按钮</span>
<span class="mo_btn linegreen">按钮</span>
<span class="mo_btn linered">按钮</span>
<span class="mo_btn lineyellow">按钮</span>

<div class="box">分割线</div>

<div style="height:100px;background:gold">
	<div class="mo_p_center">提供两种垂直居中方式，一种position,一种margin，这是position</div>
</div>

<div class="box">分割线</div>

<div style="height:100px;background:gold">
	<div class="mo_m_center">提供两种垂直居中方式，一种position,一种margin，这是margin</div>
</div>

<div class="box">分割线</div>

<div class="print2">
	<div class="mo_banner">
	    <ul class="mo_banner_in">
	        <li class="mo_banner_img" banner-txt="第11张图第11张图第11张图第11张图第11张图第11张图第11张图"><img src="img/1.jpg"></li>
	        <li class="mo_banner_img" banner-txt="第22张图第11张图第11张图第11张图第11张图第11张图"><img src="img/2.jpg"></li>
	        <li class="mo_banner_img" banner-txt="第33张图第11张图第11张图第11张图第11张图第11张图第11张图"><img src="img/3.jpg"></li>
	        <li class="mo_banner_img" banner-txt="第44张图第11张图第11张图第11张图第11张图第11张图第11张图"><img src="img/4.jpg"></li>
	    </ul>
	</div>
</div>

<div class="box">分割线</div>

<div>
	
<span class="mo_btn" mo-show="modal01">打开模态窗</span>
<div class="mo_modal" id="modal01" mo-hide="modal01">
	<div class="mo_title">
		模态窗
		<button class="mo_btn mo_left mo_m_center">按钮</button>
		<button class="mo_btn mo_right mo_p_center" mo-hide="modal01">关闭</button>
	</div>
	<div class="big">
		<div class="mo_title">选项卡</div>
		<ul class="mo_tab" mo-link="item1">
			<li class="mo_tab_li light">12312</li>
			<li class="mo_tab_li">12312</li>
			<li class="mo_tab_li">12312</li>
			<li class="mo_tab_li">12312</li>
		</ul>
		<ol class="mo_main" mo-link="item1">
			<li class="mo_main_li block">第一页</li>
			<li class="mo_main_li">第二页</li>
			<li class="mo_main_li">第三页</li>
			<li class="mo_main_li">第四页</li>
		</ol>
	</div>
</div>

</div>

<div class="box">分割线</div>

<ul class="mo_tab">
	<li class="mo_tab_li light">12312</li>
	<li class="mo_tab_li">12312</li>
	<li class="mo_tab_li">12312</li>
	<li class="mo_tab_li">12312</li>
</ul>

<div class="box">分割线</div>

<div class="mo_title">
	多余文字隐藏，显示省略号属性
</div>
<p class="mo_txt_hidden">默认宽度100%，可自行设置宽度，如width:10em;默认宽度100%，可自行设置宽度，如width:10em;默认宽度100%，可自行设置宽度，如width:10em;默认宽度100%，可自行设置宽度，如width:10em;</p>

<div class="box">分割线</div>

<div class="mo_title">选项卡</div>
<ul class="mo_tab" mo-link="item">
	<li class="mo_tab_li light">12312</li>
	<li class="mo_tab_li">12312</li>
	<li class="mo_tab_li">12312</li>
	<li class="mo_tab_li">12312</li>
</ul>
<ol class="mo_main" mo-link="item">
	<li class="mo_main_li block">第一页</li>
	<li class="mo_main_li">第二页</li>
	<li class="mo_main_li">第三页</li>
	<li class="mo_main_li">第四页</li>
</ol>

<div class="box">分割线</div>

<div class="mo_menu">
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
	<div class="mo_title">菜单</div>
</div>

<div class="box">分割线</div>

</body>
</html>
<script>
//调用轮播图
banner.come(".print2")	//轮播图拖动，接受一个参数，为轮播图的盒子id或class，用于在一个页面多个轮播图时区分
banner.mark(".print2")	//轮播图角标，接受一个参数，为轮播图的盒子id或class，用于在一个页面多个轮播图时区分
banner.txt(".print2")	//轮播图文字，接受一个参数，为轮播图的盒子id或class，用于在一个页面多个轮播图时区分
banner.loop(".print2",2000)	//轮播图循环，接受两个参数，1.为轮播图的盒子id或class，用于在一个页面多个轮播图时区分;2.为每张轮播图停留时间
</script>